<template>
  <div>
    <div class="page-header col-xs-offset-2 col-xs-8">
      <h2>Vue路由测试</h2>
    </div>
    <!-- 导航区域 -->
    <div class="col-xs-2 col-xs-offset-2">
        <!-- 
            <router-link class="list-group-item" to="/about" active-class="active">About</router-link>
            <router-link class="list-group-item" to="/home" active-class="active">Home</router-link> 
        -->
        <router-link class="list-group-item" :to="{name:'guanyu'}" active-class="active" replace>About</router-link>
        <router-link class="list-group-item" :to="{name:'zhuye'}" active-class="active" replace>Home</router-link>

        <p>
            <button @click="qianJin">forward前进</button>
            <button @click="$router.go(1)">go 前进</button>

        </p>
        <p>
            <button @click="houTui">back 后退</button>
            <button @click="$router.go(-1)">go 后退</button>

        </p>
    </div>
    <!-- 展示区 -->
    <div class="col-xs-6 panel-body">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  mounted() {
    console.log('App this: ', this)
    console.log('this.$router: ',this.$router)
    console.log('this.$route: ',this.$route)
  },
  methods:{
    qianJin(){
        this.$router.forward()
    },
    houTui(){
        this.$router.back()
    }
  }
}
</script>

<style>

</style>